<template>

 
 <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">主页面</el-breadcrumb-item>
          <el-breadcrumb-item>繁殖与生育信息</el-breadcrumb-item>
          <el-breadcrumb-item>母牛受精信息修改</el-breadcrumb-item>
         </el-breadcrumb>
  <el-divider/>

  <el-descriptions title="母牛修改窗口" :column="3"  border>

    <!-- 牛的耳号 -->

    <el-descriptions-item label="牛的耳号" >

      <el-input v-model="matingLog.cattleId" style="width: 220px" placeholder="请输入耳号" clearable />

    </el-descriptions-item>

    <el-descriptions-item label="配种时间" >

      <el-date-picker v-model="matingLog.matingDateValue" type="date" placeholder="请输入配种时间" />

    </el-descriptions-item>


       <el-descriptions-item label="配种状态">

      <el-select v-model="matingLog.state" clearable placeholder="请选择配种状态" style="width: 220px">

        <el-option

          v-for="item in state_list"

          :key="item.value"

          :label="item.label"

          :value="item.value"

        />

      </el-select>

    </el-descriptions-item>


  </el-descriptions>

  <el-divider/>
  <!-- 添加按钮 -->

   <el-button type="primary" round @click="updateFemaleCattleMating" >修改</el-button>


   

</template>


<script setup lang="ts">

import axios from 'axios';
import { ref } from 'vue';

let state_list = [

  {

    value: '配种成功',

    label: '配种成功',

  },

  {

    value: '配种失败',

    label: '配种失败',

  }

];



const urlParams = new URLSearchParams(window.location.search);
let  cattleId= urlParams.get('cattleId')

const matingLog= ref({
 
  cattleId: cattleId,
  matingDate: '',
  matingDateValue: null as Date | null, 
  state: '',

});

function refresh() {
    location.reload();
  }
//  function updateFemaleCattleMating() {

//     matingLog.value.matingDate = matingLog.value.matingDateValue?.toISOString().split('T')[0];
//  axios.post("http://localhost:8080/matingLog/updateMatingLog", matingLog.value)

//     .then(function (response) {

//       console.log(response.data);

//     })

//     .catch(function (error) {

//       console.error(error);

//     });
// refresh();
// }

</script>


